// 实现在vue3下面的插件编写 在插件内部实现一下图片懒加载指令
import { useIntersectionObserver } from '@vueuse/core'

// 使用插件方式定义图片懒加载指令
export default {
  install: (app) => {
    app.directive('img-lazy', {
      mounted (el, binding) {
        useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          if (isIntersecting) {
            el.src = binding.value
          }
        }
        )
      }
    })
  }
}
